<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { fetchPutSocietyApplies } from '@/api/manage/checkCenter/society'
import { useUserStoreHook } from '@/store/modules/user';
import { filterDate } from '@/utils/format'
const props = defineProps({
  goodsFormDialog: Boolean,
  dialogData: Object,
});
const emit = defineEmits(["closeDialog"]);
const closeDialog = () => {
  emit("closeDialog");
};
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  result: 0,
  remark: '',
})

const rules = reactive<FormRules>({
  result: [
    {
      required: true,
      message: '请选择审批意见',
      trigger: 'change',
    },
  ],
  remark: [
    {
      required: true,
      message: '请填写审批备注',
      trigger: 'blur',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const data = props.dialogData
      const params = {
        id: data ? data.id : '',
        status: ruleForm.result,
        checkPerson: useUserStoreHook().userInfo.id,
        remark: ruleForm.remark,
        applyType:props.dialogData.applyType || 1
      }
      fetchPutSocietyApplies(params).then((res: { code: number; }) => {
        if (res.code == 200) {
          emit("closeDialog");
          ElMessage({
            message: '审批成功',
            type: 'success'
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit("closeDialog");
}
// 申请类型
const applyTypeOptions = reactive([
  {
    id: 1,
    name: '创建社团'
  },
  {
    id: 2,
    name: '社团信息修改'
  },
  {
    id: 3,
    name: '解散社团'
  },
  {
    id: 4,
    name: '社团换届'
  },
])
// 过滤申请类型
const filterApplyType = (val: number) => {
  let applyStr = ''
   applyTypeOptions.forEach((item) => {
    if (item.id == val) {
      applyStr = item.name
    }
   })
  return applyStr
}
</script>

<template>
  <el-dialog :model-value="props.goodsFormDialog" title="申请详情" @close="closeDialog" v-if="props.dialogData">
    <el-row class="row-col-1 row-header">
      <el-col :span="24" class="font-weight">申请人信息</el-col>
    </el-row>
    <el-row class="row-col-3">
      <el-col :span="8">姓名：{{ props.dialogData.User.name }}</el-col>
      <el-col :span="8">性别：{{ props.dialogData.User.gender == 0 ? '男' : '女' }}</el-col>
      <el-col :span="8">手机号：{{ props.dialogData.User.phone }}</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12">学号：{{ props.dialogData.User.stuCode }}</el-col>
      <el-col :span="12">学院：{{ props.dialogData.User.College.name }}</el-col>
    </el-row>
    <el-row class="row-col-2 row-footer mb-20">
      <el-col :span="12">专业：{{ props.dialogData.User.Major.name }}</el-col>
      <el-col :span="12">年级：{{ props.dialogData.User.Grade.name }}</el-col>
    </el-row>

    <el-row class="row-col-1 row-header ">
      <el-col :span="24" class="font-weight">申请内容</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12">申请类型：{{ filterApplyType(props.dialogData.applyType) }}</el-col>
      <el-col :span="12">申请时间：{{ filterDate(props.dialogData.createdAt) }}</el-col>
    </el-row>
    <el-row class="row-col-3" v-if="props.dialogData.applyType == 0">
      <el-col :span="8">拟社团名称：{{ props.dialogData.name }}</el-col>
      <el-col :span="8">拟社团类型：{{ props.dialogData.type }}</el-col>
      <el-col :span="8">拟招新人数：{{ props.dialogData.planNum }}人</el-col>
    </el-row>
    <el-row class="row-col-1" v-if="props.dialogData.applyType == 0">
      <el-col :span="24">拟封面图片：
        <div class="demo-image__preview">
          <el-image style="height: 150px" :src="props.dialogData.publicizeUrl" :zoom-rate="1.2"
            :preview-src-list="[props.dialogData.publicizeUrl]" fit="cover" />
        </div>
      </el-col>
    </el-row>

    <el-row class="row-col-3" v-if="props.dialogData.applyType == 2">
      <el-col :span="8">新社团名称：{{ props.dialogData.name }}</el-col>
      <el-col :span="8">新社团类型：{{ props.dialogData.type }}</el-col>
      <el-col :span="8">新招新人数：{{ props.dialogData.planNum }}人</el-col>
    </el-row>
    <el-row class="row-col-1" v-if="props.dialogData.applyType == 2">
      <el-col :span="24">新封面图片：
        <div class="demo-image__preview">
          <el-image style="height: 150px" :src="props.dialogData.publicizeUrl" :zoom-rate="1.2"
            :preview-src-list="[props.dialogData.publicizeUrl]" fit="cover" />
        </div>
      </el-col>
    </el-row>
    <el-row class="row-col-1" v-if="props.dialogData.applyType == 0">
      <el-col :span="24">附件： <el-link type="primary" :href="props.dialogData.attachment">点击下载附件</el-link></el-col>
    </el-row>
    <el-row class="row-col-1 row-footer mb-20" >
      <el-col :span="24">申请原因：{{ props.dialogData.reason  || '--'}}</el-col>
    </el-row>

    <div v-if="props.dialogData.status > 0">
      <el-row class="row-col-1 row-header ">
        <el-col :span="24" class="font-weight">审批记录</el-col>
      </el-row>
      <el-row class="row-col-2">
        <el-col :span="12">审批人：{{ props.dialogData.checkPerson }}</el-col>
        <el-col :span="12">审批意见：
          <span class="check-agree" v-if="props.dialogData.status == 1">同意</span>
          <span class="check-refuse" v-else>驳回</span>
        </el-col>
      </el-row>
      <el-row class="row-col-1">
        <el-col :span="24">审批时间：{{ filterDate(props.dialogData.updatedAt) }}</el-col>
      </el-row>
      <el-row class="row-col-1 row-footer">
        <el-col :span="24">审批备注：{{ props.dialogData.remark }}</el-col>
      </el-row>
    </div>

    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" size="default"
      status-icon v-else>
      <el-form-item label="审批意见：" prop="result">
        <el-radio-group v-model="ruleForm.result">
          <el-radio label="1" border class="form-radio">同意</el-radio>
          <el-radio label="2" border>驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批备注：" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" />
      </el-form-item>
      <el-form-item class="form-footer-box">
        <el-button @click="resetForm(ruleFormRef)" class="btn-white">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn-green">
          确定
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>


<style scoped lang="scss">
.goods-record {
  font-size: 2rem;
  padding: 2rem 2rem 3rem 0;
  margin-top: 2rem;
}

.demo-ruleForm {
  margin-top: 2rem;

  .el-form-item {
    margin-top: 2rem;
  }

  .form-radio {
    margin-right: 2rem;
  }
}

.apply-img {
  height: 100px;
  cursor: pointer;
}
</style>
<style lang="scss" >
.form-footer-box {
  .el-form-item__content {
    display: flex;
    justify-content: end;
  }
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
